<template>
    <div>
      <el-carousel type="card" height="240px">
        <el-carousel-item v-for="item in linkList" :key="item.linkId">
          <h3 text="2xl" justify="center">
<!--            <el-link @click="open(item.linkUrl)">-->
            <el-link style="border: 1px solid #99a9bf;">
              <el-image :src="item.linkImage" style="width: 620px; height: 240px" />
            </el-link>
<!--            <el-link>-->
<!--              <img src="../../../public/image/1.jpg" style="width: 620px; height: 240px">-->
<!--            </el-link>-->
          </h3>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!--  公告-->
    <el-divider><span style="font-size: 23px; font-family: '楷体'">公告</span></el-divider>
    <!--  搜索表单-->
    <el-form :inline="true" :model="searchNotice.noticeTitle">
      <el-form-item label="公告标题">
        <el-input
          v-model="searchNotice.noticeTitle"
          type="text"
          autocomplete="off"
          style="width: 180px"
          placeholder="输入搜索标题"
        />
      </el-form-item>
      <el-form-item label="公告类型">
        <el-select
          v-model="searchNotice.noticeType"
          placeholder="选择公告类型"
          clearable
          style="width: 180px"
        >
          <el-option
            v-for="item in noticeTypeList"
            :key="item.value"
            :label="item.value"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">搜索</el-button>
        <el-button type="info" @click="resetForm">清空</el-button>
      </el-form-item>
    </el-form>

    <!--  公告列表-->
    <el-table
      ref="singleTableRef"
      :data="noticeInfo"
      highlight-current-row
      height="260px"
      @current-change="handleCurrentChange"
    >
      <el-table-column type="index" label="序号" width="110" align="center" />
      <el-table-column property="noticeTitle" label="公告标题" align="center" />
      <el-table-column property="noticeType" label="公告类型" width="180" align="center" />
      <el-table-column property="createTime" label="发布日期" align="center" />
    </el-table>

    <!--  点击对应公告时的对话框-->
    <el-dialog v-model="dialogVisible" :title="notice.noticeTitle" center align-center width="50%">
      <p style="text-indent: 2em">{{ notice.noticeContent }}</p>
      <div v-if="notice.noticeFileName != '' && notice.noticeFileName != null">
        <br /><br /><br />
        <p>相关文件：</p>
        <el-link
          :href="notice.noticeFileUrl"
          :underline="false"
          target="_blank"
          :download="notice.noticeFileName"
        >
          <el-icon><Document /></el-icon>{{ notice.noticeFileName }}
        </el-link>
      </div>
      <template #footer>
        <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>

    <!--  分页-->
    <div style="margin-top: 10px">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 15, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
        small
        @size-change="SizeChange"
        @current-change="CurrentChange"
      />
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { ElMessage, ElTable } from 'element-plus'
import { getNoticeInfo } from '@/apis/notice'
import { getLinkInfo } from '@/apis/link'
import { userStore } from '@/stores/user'
import { isLogin } from '@/apis/security/user'

var isHovered = ref(false)

isLogin()

const userstore = userStore()
// 用于搜索和分页
const searchNotice = ref({
  noticeTitle: '',
  noticeType: ''
})
const pageSize = ref(5)
const currentPage = ref(1)
const total = ref(30)
const noticeTypeList = ref([{ value: '' }])
const dialogVisible = ref(false)
const linkList = ref([
  {
    linkId: 1,
    linkImage: '/public/image/1.jpg',
    linkUrl: ''
  },
  {
    linkId: 2,
    linkImage: '/public/image/2.jpg',
    linkUrl: ''
  },
  {
    linkId: 3,
    linkImage: 'public/image/3.jpg',
    linkUrl: ''
  },
])

interface Notice {
  noticeId: number
  noticeTitle: string
  noticeContent: string
  noticeType: string
  noticeFileName: string
  noticeFileUrl: string
  createTime: String
}

const singleTableRef = ref<InstanceType<typeof ElTable>>()
const noticeInfo = ref<Notice[]>([
  {
    noticeId: 1,
    noticeTitle: '选拔考试须知',
    noticeContent: '选拔考试须知',
    noticeType: '公告',
    noticeFileName: '',
    noticeFileUrl: '/public/1.html',
    createTime: '2025-09-12 17:32:15'
  },
  {
    noticeId: 2,
    noticeTitle: '入班指南',
    noticeContent: '入班指南',
    noticeType: '公告',
    noticeFileName: '',
    noticeFileUrl: '/public/2.html',
    createTime: '2025-09-12 17:34:29'
  }
])

const notice = ref<Notice>({
  noticeId: 0,
  noticeTitle: '',
  noticeContent: '',
  noticeType: '',
  noticeFileName: '',
  noticeFileUrl: '',
  createTime: ''
})

const page = () => {
  getNoticeInfo(
    searchNotice.value.noticeTitle,
    searchNotice.value.noticeType,
    '使用中',
    pageSize.value,
    currentPage.value
  ).then((res) => {
    console.log('获取公告信息')
    if (res.data.code === 1) {
      console.log('获取成功')
      noticeInfo.value = res.data.data.rows
      total.value = res.data.data.total
    } else {
      ElMessage({ type: 'error', message: res.data.msg })
      console.log('获取失败')
    }
  })
}
const getLinkList = () => {
  getLinkInfo('').then((res) => {
    if (res.data.code === 200) {
      linkList.value = res.data.data
    } else {
      ElMessage.error(res.data.msg)
    }
  })
}
onMounted(() => {
  // getLinkList()
  // getAllNotice('使用中').then((res) => {
  //   if (res.data.code === 1) {
  //     let type = ref(new Set())
  //     for (let i = 0; i < res.data.data.length; i++) {
  //       type.value.add(res.data.data[i].noticeType)
  //     }
  //     let i = 0
  //     for (let v of type.value.values()) {
  //       noticeTypeList.value[i] = { value: v }
  //       i++
  //     }
  //   } else {
  //     ElMessage({ type: 'Error', message: res.data.msg })
  //     console.log('获取失败')
  //   }
  // })
  // page()
  userstore.defaultUrl = '/Index'
})

const viewDetails = () => {
  console.log('查看详细信息')
}

// 新窗口打开链接
const open = (url: string) => {
  window.open(url)
}

const handleCurrentChange = (val: Notice | undefined) => {
  singleTableRef.value!.setCurrentRow(null)
  if (val) {
    notice.value = val
    //切换路由到/public/1.html
    open(val.noticeFileUrl);
  } else {
    notice.value = {
      noticeId: 0,
      noticeTitle: '',
      noticeContent: '',
      noticeType: '',
      noticeFileName: '',
      noticeFileUrl: '',
      createTime: ''
    }
  }
  // dialogVisible.value = true
}


const submitForm = () => {
  currentPage.value = 1
  page()
}
const resetForm = () => {
  searchNotice.value = {
    noticeTitle: '',
    noticeType: ''
  }
  page()
}
const SizeChange = (val: number) => {
  pageSize.value = val
  page()
}
const CurrentChange = (val: number) => {
  currentPage.value = val
  page()
}
</script>
<style scoped>
.el-carousel__item h3 {
  color: #475669;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.card {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 16px;
  width: calc(100% - 16px);
  box-sizing: border-box;
}
</style>
